<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .clip {
      position: absolute;
      clip: rect(0 0 0 0);
    }
  </style>
</head>

<body>
  <input type="file" id="uploadFile" class="clip" accept="image/*">
  <label class="ui-button ui-button-primary" for="uploadFile">选择图片</label>
  <img id="imgCover" src="./ThreeJs/images/box.png" class="clip">
  <p id="imgUploadX"></p>
  <script>
    var eleUploadFile = document.getElementById('uploadFile');
    var eleImgCover = document.getElementById('imgCover');
    var eleImgUploadX = document.getElementById('imgUploadX');

    if (history.pushState) {
      eleUploadFile.addEventListener('change', function (event) {
        var reader = new FileReader();
        var file = event.target.files[0] || event.dataTransfer.files[0];
        reader.onload = function (e) {
          var base64 = e.target.result;
          if (base64.length > 1024 * 50) {
            alert('图片尺寸请小于50K');
            return;
          } else {
            // 使用canvas合成图片，并base64化
            imgTogether(base64, function (url) {
              // 尺寸
              var size = 180 / (window.devicePixelRatio || 1);
              // 预览
              eleImgUploadX.innerHTML = '<img src="' + url + '" width="' + size + '" height="' + size + '">';
            });
          }
        };
        reader.readAsDataURL(file);
      });

      // canvas图片合成
      var imgTogether = function (url, callback) {
        var canvas = document.createElement('canvas');
        var size = 180;
        canvas.width = size;
        canvas.height = size;

        var context = canvas.getContext('2d');

        // 这是上传图像
        var imgUpload = new Image();
        imgUpload.onload = function () {
          // 绘制
          context.drawImage(imgUpload, 0, 0, size, size, 0, 0, size, size);
          // 再次绘制
          context.drawImage(eleImgCover, 0, 0, size, size, 0, 0, size, size);
          // 回调
          callback(canvas.toDataURL('image/png'));
        };
        imgUpload.src = url;
      };
    } else if (eleImgUploadX) {
      eleImgUploadX.className = 'remind';
      eleImgUploadX.innerHTML = '本演示IE10+下才有效果';
    }
  </script>
</body>

</html>